<template>
	<div style="display: inline-block;" class="paging">
		<a :href="url2+'page='+data.prev" v-if="data.prev" class="paging-btn">上一页</a>
		<template v-for="v in data.pagingList">
			<a :href="url2+'page='+v" v-if="data.page!=v" class="paging-a">{{v}}</a>
			<span v-if="data.page==v" class="paging-span">{{v}}</span>
		</template>
		<a :href="url2+'page='+data.next" v-if="data.next"  class="paging-btn">下一页</a>
		<span class="paging-count">共 {{data.countPage}} 页</span>
	</div> 
</template>
 
<script>
	/*
	组件属性[
		url:""
		data:{
			count: 1
			countPage: 1
			next: ""
			page: "1"
			pagingList: []
			prev: ""
		}		
	]
	组件事件[
		enter:点击确定触发，callback(obj[当前实例])
	]
	*/ 
	module.exports={
		props:{
			data:{},
			url:""
		},
		data(){
			return {
				url2:""
			}
		},
		
		methods:{			
			
		},
		created(){
			if(this.url.indexOf('?')>-1){
				var tmp=this.url.split('?')[0]
				var str=JSON.parse(JSON.stringify(query)),tmp2="";
				delete str.page;
				for(var i in str){
					tmp2+=i+"="+str[i]+"&"
				}
				this.url2=tmp+"?"+tmp2;
			}else{
				this.url2=this.url+"?"
			}
			//_this=this;
		}		
	}
</script>

<style>
	.paging-a,.paging-span{display: inline-block;color:#333;line-height: 20px; margin:0 5px;width:20px;height:20px;border:solid 1px #ddd;}
	.paging-span{background: #ddd;}
	.paging-btn{color:#333}
	.paging-btn:hover,.paging-a:hover{color:red;}
	.paging-count{margin-left: 10px;}
</style>